CSS スライドショー 4枚

CSS スライドショー: JS不要！4種類の純粋CSSで実現するクールなカルーセル

まだJavaScriptに頼ってWebサイトのカルーセルを実装していますか？この記事では、純粋なCSSを使用してクールなスライドショー効果を作成する4つの方法を紹介します。面倒なJSコードとはさよならして、簡単にWebサイトに動的なカルーセルを実装しましょう！

CSS スライドショー: JS不要！4種類の純粋CSSでカルーセルを実現

1. CSS `animation` プロパティで無限ループカルーセル

主な内容: `animation` プロパティでアニメーションを設定し、 `@keyframes` でアニメーションのキーフレームを定義することで、画像の自動切り替えを実現します。

コード例:

<div class="carousel">
  <div class="slide">スライド1</div>
  <div class="slide">スライド2</div>
  <div class="slide">スライド3</div>
</div>

.carousel {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: slide 9s infinite;
}

@keyframes slide {
  0% { left: 0; }
  33.33% { left: -100%; }
  66.66% { left: -200%; }
  100% { left: 0; }
}

メリット: シンプルで分かりやすく、コードが簡潔。

デメリット: 再生・一時停止などの操作を手動で行うことができない。

2. CSS `animation` + `radio` で手動切り替えカルーセル

主な内容: `animation` をベースに、 `radio` ボタンと `:checked` 擬似クラスセレクタを組み合わせることで、クリックによる手動での画像切り替えを実現します。

コード例:

<div class="carousel">
  <input type="radio" name="slide" id="slide1" checked>
  <input type="radio" name="slide" id="slide2">
  <input type="radio" name="slide" id="slide3">

  <div class="slides">
    <label for="slide1" class="slide">スライド1</label>
    <label for="slide2" class="slide">スライド2</label>
    <label for="slide3" class="slide">スライド3</label>
  </div>
</div>

.carousel {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.slides {
  position: relative;
  width: 300%;
  height: 100%;
  transition: transform 0.5s;
}

.slide {
  display: block;
  width: 33.33%;
  height: 100%;
  float: left;
}

#slide1:checked ~ .slides { transform: translateX(0%); }
#slide2:checked ~ .slides { transform: translateX(-33.33%); }
#slide3:checked ~ .slides { transform: translateX(-66.66%); }

メリット: 手動でカルーセルを操作できるため、インタラクティブ性が高い。

デメリット: コードが若干複雑になる。

3. CSS 3D `transform` でクールな3Dカルーセル

主な内容: `transform` プロパティの `rotateY` と `translateZ` の値、そして `perspective` プロパティを組み合わせることで、3D回転カルーセル効果を実現します。

コード例:

<div class="carousel">
  <div class="slide">スライド1</div>
  <div class="slide">スライド2</div>
  <div class="slide">スライド3</div>
</div>

.carousel {
  width: 300px;
  height: 200px;
  perspective: 1000px;
  position: relative;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

.slide:nth-child(1) { transform: rotateY(0deg) translateZ(200px); }
.slide:nth-child(2) { transform: rotateY(120deg) translateZ(200px); }
.slide:nth-child(3) { transform: rotateY(240deg) translateZ(200px); }

メリット: 視覚効果がクールで、より目を引く。

デメリット: コードが複雑で、ある程度のCSSの知識が必要。

4. CSS `Flexbox` で柔軟なレイアウトのカルーセル

主な内容: `Flexbox` レイアウトと `order` プロパティ、そして `animation` アニメーションを組み合わせることで、柔軟な画像カルーセルレイアウトを実現します。

コード例:

<div class="carousel">
  <div class="slide" style="order: 1;">スライド1</div>
  <div class="slide" style="order: 2;">スライド2</div>
  <div class="slide" style="order: 3;">スライド3</div>
</div>

.carousel {
  width: 300px;
  height: 200px;
  display: flex;
  overflow: hidden;
}

.slide {
  flex: 0 0 100%;
  animation: slide 9s infinite;
}

@keyframes slide {
  0% { order: 1; }
  33.33% { order: 3; }
  66.66% { order: 2; }
  100% { order: 1; }
}

メリット: レイアウトが柔軟で、さまざまなカルーセル効果を実現できる。

デメリット: `Flexbox` レイアウトについての知識が必要。

参考資料

Q&A

Q1. なぜ純粋なCSSでカルーセルを実装するのですか？

A1. JavaScriptに比べてコードがシンプルで、軽量であるため、ページの読み込み速度が向上します。また、CSSアニメーションはGPUアクセラレーションが効きやすく、滑らかな動きを実現できます。

Q2. 上記の方法以外に、純粋なCSSでカルーセルを実装する方法はありますか？

A2. はい、他にもCSS Grid Layoutを用いた方法などがあります。それぞれの方法にはメリット・デメリットがあるので、用途に合わせて最適な方法を選択しましょう。

Q3. カルーセルのデザインをさらにカスタマイズしたい場合はどうすれば良いですか？

A3. 上記のコード例はあくまで基本的な実装なので、CSSの各プロパティを調整することで、自由にデザインをカスタマイズすることができます。例えば、画像のサイズや位置、アニメーションの速度などを調整できます。

その他の参考記事:css スライドショーレスポンシブ